<!--
 * @Author       : 邱狮杰
 * @Date         : 2021-09-01 10:33:45
 * @LastEditTime : 2021-09-06 11:54:26
 * @FilePath     : /newhope/src/page/bestWishesSuccess/index.vue
 * @Description  : 祝福保存成功跳转到抽奖
-->

<script setup lang="ts">
import startClick from "/@/assets/images/clickStart.png";
import saveSuccess from "/@/assets/images/saveSuccess.png";
import { useGo } from "/@/hooks/go";
const [go] = useGo();
function clickStartHandler() {
  go({ name: "luckDraw" });
}
</script>

<template>
  <div class="bestWishesSuccess">
    <img alt="祝福" class="saveSuccess" :src="saveSuccess" />
    <img @click="clickStartHandler" :src="startClick" alt="点击开始" class="startClick an" />
  </div>
</template>

<style lang="scss" scoped>
.an {
  -webkit-animation: bounce-top 0.9s both;
  animation: bounce-top 0.9s both;
}
@-webkit-keyframes bounce-top {
  0% {
    -webkit-transform: translateX(-50%) translateY(-45px);
    transform: translateX(-50%) translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateX(-50%) translateY(-24px);
    transform: translateX(-50%) translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateX(-50%) translateY(-12px);
    transform: translateX(-50%) translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateX(-50%) translateY(-6px);
    transform: translateX(-50%) translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateX(-50%) translateY(-4px);
    transform: translateX(-50%) translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateX(-50%) translateY(0px);
    transform: translateX(-50%) translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0px);
    transform: translateX(-50%) translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
@keyframes bounce-top {
  0% {
    -webkit-transform: translateX(-50%) translateY(-45px);
    transform: translateX(-50%) translateY(-45px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    opacity: 1;
  }
  24% {
    opacity: 1;
  }
  40% {
    -webkit-transform: translateX(-50%) translateY(-24px);
    transform: translateX(-50%) translateY(-24px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  65% {
    -webkit-transform: translateX(-50%) translateY(-12px);
    transform: translateX(-50%) translateY(-12px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  82% {
    -webkit-transform: translateX(-50%) translateY(-6px);
    transform: translateX(-50%) translateY(-6px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  93% {
    -webkit-transform: translateX(-50%) translateY(-4px);
    transform: translateX(-50%) translateY(-4px);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
  25%,
  55%,
  75%,
  87% {
    -webkit-transform: translateX(-50%) translateY(0px);
    transform: translateX(-50%) translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
  }
  100% {
    -webkit-transform: translateX(-50%) translateY(0px);
    transform: translateX(-50%) translateY(0px);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    opacity: 1;
  }
}
.bestWishesSuccess {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: url("../../assets/images/bkg/saveBkg.jpg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  .saveSuccess {
    position: absolute;
    top: 172px;
    left: 50%;
    transform: translateX(-50%);
    width: 311px;
    height: 181px;
  }
  .startClick {
    position: absolute;
    left: 50%;
    top: 382px;
    transform: translateX(-50%);
    width: 152px;
    height: 42px;
  }
}
</style>
